<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>视频 </title>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <script src="../js/set-meta.js"></script>
  <script type="text/javascript" src="../js/ezuikit.js" ></script>
  <link rel="stylesheet" type="text/css" href="../css/video.css"/>
  <script src="../js/avalon.mobile.js"></script>
</head>

<body>

<header class="mui-bar-nav mui-bar-nav-1">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<p class="mui-title mui-pull-left">视频</p>
		<!--<img src="../images/top_bar_switch_one.png" class="top_bar_switch_one mui-active"/>-->
		<img src="../images/top_bar_switch_more.png" class="top_bar_switch_more" id="switchVideo"/>
		

</header>
		<div class="mui-content" >
				<ul id="videoList">
						<!--<li class="mui-active">视频1</li>
						<li>视频2</li>
						<li>视频3</li>-->
				</ul>
			<!--ms-controller='videoData'-->
				<ul class="video-part mui-active" id="videoSingle" >
						<!--<img src="../images/viedo_left_off.png" class="viedo_left_off" ms-if='@Array.length>=2' />-->
						<!--<img src="../images/video_right_on.png" class="video_right_on" ms-if='@Array.length>=2'/>-->
						
						<!--<li class="video-row video-type-1 mui-active mui-pull-left" data-index="0">
								<span class="video-name">camera1</span>
								<video id="myPlayer" poster="images/conver.png" poster="" controls playsInline webkit-playsinline autoplay>
										<source ms-attr = "{src:@Array[@Index].rtmp}" type="" id="Rtmp"/>
								    <source ms-attr = "{src:@Array[@Index].liveAddress}" type="application/x-mpegURL" id="LiveAddress"/>
								</video>
						</li>-->
						<!--<li class="video-row video-type-1 mui-pull-left"  data-index="1">
								<span class="video-name">camera2</span>
								<img src="../images/video.jpg" alt=""class="video" />
						</li>
						<li class="video-row video-type-1 mui-pull-left"  data-index="2">
								<span class="video-name">camera3</span>
								<img src="../images/video.jpg" alt=""class="video" />
						</li>
						<li class="video-row video-type-1 mui-pull-left"  data-index="3">
								<span class="video-name">camera4</span>
								<img src="../images/video.jpg" alt=""class="video" />
						</li>-->
				</ul>
				
				<div id="controller">
					<span class="iconfont icon-xiangshang-copy" id="btnUp"></span>
					<span class="iconfont icon-xiangxia-copy" id="btnDown"></span>
					<span class="iconfont icon-xiangzuo" id="btnLeft"></span>
					<span class="iconfont icon-xiangyou-copy" id="btnRight"></span>
					
					<!--<span class="iconfont icon-zuoshang-" id="btnUpLeft"></span>
					<span class="iconfont icon-youshang-" id="btnUpRight"></span>
					<span class="iconfont icon-zuoxia" id="btnDownLeft"></span>
					<span class="iconfont icon-youxia-copy" id="btnDownRight"></span>				-->
				</div>
				
				<p id="noVideoTips">用户未绑定摄像头</p>
		</div>
		

<script>
			var paramsControl = {
	 				sysVideoId : 1,
	 				direction : 0
	 		}

			$('#switchVideo').on('tap',function(){
					$('#videoList').toggle();
			});
	 		
	 		$('#videoSingle').delegate('.viedo_left_off','tap',function(){
	 				if (vm.Index == 0) {
	 					vm.Index = vm.Array.length-1;
	 				}
	 				else{
	 					vm.Index -=1;
	 				}
	 				paramsControl.sysVideoId = vm.Array[vm.Index].sysVideoId;
	 				$('#Rtmp').attr('src',vm.Array[vm.Index].rtmp);
	 				$('#LiveAddress').attr('src',vm.Array[vm.Index].liveAddress);
	 		});
	 		
	 		$('#videoSingle').delegate('.video_right_on','tap',function(){
	 				if (vm.Index == vm.Array.length-1) {
	 					vm.Index = 0;
	 				}
	 				else{
	 					vm.Index +=1;
	 				}
	 				console.log(vm.Index + ' '+vm.Array.length+$('#Rtmp').attr('src'));
	 				paramsControl.sysVideoId = vm.Array[vm.Index].sysVideoId;
	 				$('#Rtmp').attr('src',vm.Array[vm.Index].rtmp);
	 				$('#LiveAddress').attr('src',vm.Array[vm.Index].liveAddress);
	 				console.log($('#Rtmp').attr('src'))
//	 				var NowIndex = parseInt( $('#videoSingle .video-row.mui-active').attr('data-index') );
//	 				$('#videoSingle .video-row').removeClass('mui-active');
//	 				$('#videoSingle .video-row').eq(NowIndex==($('#videoSingle .video-row').length-1)?0:(NowIndex+1)).addClass('mui-active');
	 		});
	 		
	 		
	 		
	 		$('#videoList').delegate('li','tap',function(){
	 				console.log($(this).index());
	 				$('#videoList li').removeClass('mui-active');
	 				$(this).addClass('mui-active');
	 				vm.Index = $(this).index();
	 				$('#Rtmp').attr('src',vm.Array[vm.Index].rtmp);
	 				$('#LiveAddress').attr('src',vm.Array[vm.Index].liveAddress);
	 				console.log(vm.Array[vm.Index].liveAddress)
	 				$('#videoList').hide();
	 		})
	 		
	 		$('#forgetPassword').on('tap',function(){
	 			//登录检查进index
	 			App.showPage('resetPassword');
	 		});
	 		
	 		
	 		//向上
	 		$('#btnUp').on('tap',function(){
	 			console.log(148+paramsControl.sysVideoId)
	 			paramsControl.direction = 0;
	 			App.videoControl(paramsControl,function(data){
	 				console.log(JSON.stringify(data));
	 				mui.toast(data.msg);
	 			})
	 		});
	 		//向下
	 		$('#btnDown').on('tap',function(){
	 			paramsControl.direction = 1;
	 			App.videoControl(paramsControl,function(data){
	 				console.log(JSON.stringify(data));
	 				mui.toast(data.msg);
	 			})
	 		});
	 		//向左
	 		$('#btnLeft').on('tap',function(){
	 			paramsControl.direction = 2;
	 			App.videoControl(paramsControl,function(data){
	 				console.log(JSON.stringify(data));	 
	 				mui.toast(data.msg);
	 			})
	 		});
	 		//向右
	 		$('#btnRight').on('tap',function(){
	 			paramsControl.direction = 3;
	 			App.videoControl(paramsControl,function(data){
	 				console.log(JSON.stringify(data));
	 				mui.toast(data.msg);
	 			})
	 		});
	 		
	 		var vm = avalon.define({
				$id: 'videoData',
				Index : 0,
				Array: []
			});
	 		
	 		
	 		$(function() {　
	 				mui.init({
						gestureConfig: {
							tap: true,
							//默认为true
							doubletap: true,
							//默认为false
							longtap: true,
							//默认为false
							swipe: true,
							//默认为true
							drag: true,
							//默认为true
							hold: false,
							//默认为false，不监听
							release: false
						},
						beforeback: function(){
							//获得列表界面的webview
							var lists = plus.webview.all();
							plus.webview.close(lists[lists.length-1].id);
							//返回true，继续页面关闭逻辑
							return true;
						}
					});
			 		mui.plusReady(function() {
				    //预加载页面
					});
					var params = {
						sysChildrenId : localStorage.sysChildrenId
					}
					App.videoList(params,function(data){
						console.log(JSON.stringify(data));
						if (data.result) {
							 vm.Array = data.data;
//							 mui.toast(data.data.length)
		 					 if (data.data.length == 0) {
		 					 		$('#noVideoTips').show();
		 					 		$('.viedo_left_off').css('display','none');
		 					 		$('.video_right_on').css('display','none');
		 					 }
		 					 else{
		 					 		$('#controller').show();
		 					 		$('#switchVideo').show();
		 					 		$('#controller').show();
		 					 		console.log(data.data[0].rtmp);
		 					 		console.log(data.data[0].sysVideoId)
		 					 		paramsControl.sysVideoId = data.data[0].sysVideoId;
//		 					 		$('#Rtmp').attr('src',data.data[0].rtmp);
		 					 		console.log($('#Rtmp').attr('src'));
		 					 		console.log(vm.Array[vm.Index].rtmp)
		 					 		var list=document.createElement("li");
					                  list.className='video-row video-type-1 mui-active mui-pull-left';
					                  list.innerHTML="<video id='myPlayer' poster='images/conver.png' poster='' controls playsInline webkit-playsinline autoplay><source src='"+vm.Array[vm.Index].rtmp+"' type='' id='Rtmp'/><source  src='"+vm.Array[vm.Index].liveAddress+"' type='application/x-mpegURL' id='LiveAddress'/></video>";
					                  $("#videoSingle")[0].appendChild(list);					                  
					                  for(var i =0; i < data.data.length;i++){
					                  	  var listV=document.createElement("li");
					                  	  if (i==0) {
					                  	  	listV.className = "mui-active";
					                  	  }
					                  	  console.log(data.data[i].sysVideoId)
					                  	  listV.innerHTML="视频"+data.data[i].sysVideoId;
					                  	  $("#videoList")[0].appendChild(listV);
					                  }
//									$('#LiveAddress').attr('src',data.data[0].liveAddress);
//									console.log($('#LiveAddress').attr('src'));
		 					 }
	 				}
						 
					});
					
					var dragState = true;
					document.querySelector('body').addEventListener('drag', function(event) {
						if (dragState) {			
							//往左滑
							if(event.detail.deltaX < -50){
								dragState = false;
							}
							//往右滑
							else if(event.detail.deltaX > 50){
								mui.back();
							}
							timer = setTimeout(function(){
								dragState = true;
							},300);
						}	
					});
			});
		</script>
<!--<script src="../js/login.js"></script>-->

</body>

</html>